<template>
  <el-row
    type="flex"
    justify="space-around"
    align="middle"
    style="height: 50px; width: 100%"
  >
    <el-col :span="20"
      ><span>{{ nodeTree.name }}</span></el-col
    >
    <el-col :span="2">
      <div>{{ nodeTree.manager }}</div>
    </el-col>
    <el-col :span="2">
      <el-dropdown v-if="isHead"  @command="operateDept">
        <el-button type="primary" size="mini">                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           
          操作<i class="el-icon-arrow-down el-icon--right"></i>
        </el-button>
        <el-dropdown-menu slot="dropdown" @command="operateDept">
          <el-dropdown-item  command="add">添加子部门</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      <el-dropdown v-else   @command="operateDept">
        <span class="el-dropdown-link">
          操作<i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="add">添加子部门</el-dropdown-item>
          <el-dropdown-item command="edit">编辑子部门</el-dropdown-item>
          <el-dropdown-item command="del">删除子部门</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </el-col>
  </el-row>
</template>
<script>
export default {
    // 子组件接收父组件传进来的参数 props有两种接收的方法 第一种是数组的形式 props:[] , 第2种是对象的形式 props:{}
    props:{
        isHead:{
            type:Boolean,
            default:false
        },
        // 父组件传的slot-scope 控制树形组件的内容
        nodeTree:{
            required:true,//父组件必填 这个值  要求对方使用这个组件的时候 必须传nodeTree属性 如果不传 就会报错
            type:Object
        }
    },
    methods:{
      operateDept(command){
        switch(command){
          case 'add':
            console.log("add")
            this.$emit("addDepartment",this.nodeTree)

            break;
          case 'edit':
            this.$emit("editDepartment",this.nodeTree)
            console.log("edit")
           
            break;
          case 'del':
            // console.log(this.nodeTree.id)
            // 调用父组件的方法，通知父组件删除；this.nodeTree.id传入我点击当前的节点id
            this.$emit("delDepartment",this.nodeTree.id)
            break;
          default:
        }
      }
    }
}
</script>